<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://unpkg.com/react@18.1.0/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18.1.0/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    <title>Document</title>
  </head>
  <body>
    <div id="main"></div>
    <script type="text/babel">
      let globalNavDatas = null;

      async function ajaxAsync(url) {
        let promise = await fetch(url).then((response) => {
          return response.json();
        });
        return promise;
      }
      // 1. 获取导航分类的信息
      ajaxAsync(
        "https://www.lanqb.com/api/course/course-group-list?course_style=1"
      ).then(({ course_style }) => {
        console.log(course_style);
        globalNavDatas = course_style;
        renderDOM();
        // renderDOM({
        //   type: "nav",
        //   datas: course_style,
        // });
      });

      // 现象: 通过函数封装组件, 内部声明组件, 会造成组件重复创建的问题.
      // 每次定时器执行, 都在声明新的函数组件, 同时, ReactDOM.render也在重复的渲染新创建的组件.
      function renderDOM(source) {
        // 声明导航条函数组件.
        function NavCates() {
          return (
            <div className="nav">
              <button>全部</button>
              {globalNavDatas.map((nav) => (
                <button>{nav.style_title}</button>
              ))}
            </div>
          );
        }
        // 声明课程组件
        function Course(props) {
          return (
            <div className="course">
              <h3>{props.title}</h3>
            </div>
          );
        }
        // 声明根组件
        function Root() {
          return (
            <div className="root">
              <NavCates></NavCates>
              {source &&
                source.datas.map((c) => <Course title={c.title}></Course>)}
            </div>
          );
        }
        ReactDOM.render(<Root />, document.getElementById("main"));
      }

      // 2. 获取初始化的数据接口
      async function getCourses(id) {
        let { data: courses } = await ajaxAsync(
          `https://www.lanqb.com/school/professional?status=show&limit=20&page=1&course_style_ids=${id}&weight=desc`
        );
        renderDOM({
          type: "course",
          datas: courses,
        });
      }
      getCourses("");
    </script>
  </body>
</html>
